import React, { useEffect, useRef, useState } from 'react'
import {
  Tabs,
  Input,
  List,
  Avatar,
  Row,
  Col,
  Space,
  AutoComplete,
  Divider,
  Select,
  Button,
  message,
  Drawer
} from 'antd'
import {
  reqPatientList,
  reqDetal,
  reqUpdate,
  reqPulseUpdate,
  reqPulseDetail,
  reqPulseList,
  reqQuestionTermList
} from '@/services/basicConsultation';

import {
  reqPulseCalibrationList,
  reqTongueCalibrationList,
  reqDiagnosisTermList,
  reqDiagnosisTermListByGrade,
  reqSeniorInquiryList,
  reqSeniorInquiryUpdate,
  reqSymptomList,
  reqSymptomListByGrade
} from '@/services/firstConsultation';

import { EditModal } from './components/EditModal'

const PulseInfo = ({
  user,
  upDataInfo,
  readonly
}) => {
  const [data, setData] = useState<any>([])
  const isFirst = useRef(false)
  const [isFullScreenReport, setIsFullScreenReport] = useState<boolean>(false);


  async function getPulseList(query: { tyPatientId: string, tyMedicalCaseId?: string }) {
    try {
      const res = await reqPulseList({
        pageNum: 1,
        pageSize: 10,
        ...query
      })

      console.log('获取脉诊列表信息 :>> ', res?.data);
      debugger
      if (res?.resultCode == '00000000') {
        isFirst.current = true
        setData(res?.data?.result)
      } else {
        message.error(`获取脉诊列表信息出错！${res?.message}`)
      }
    } catch (error: any) {
      message.error('获取脉诊列表信息出错！', error)
      console.log('获取脉诊列表信息出错！ :>> ', error);
    }
  }


  useEffect(() => {
    if (user?.id) {
      getPulseList({
        tyPatientId: user?.tyPatientId,
        // tyMedicalCaseId: user?.id
      })
    }

  }, [user, isFirst.current])

  const pulseDataJson = data && data?.pulseDataJson && JSON.parse(data?.pulseDataJson);
  console.log('pulseDataJson :>> ', pulseDataJson);


  const [isOpen, setIsOpen] = useState(false)
  function onOpenhandle() {
    if (!readonly) {
      setIsOpen(true)
    }
  }

  function onClose(params: any) {
    if (params) {
      upDataInfo && upDataInfo({
        // seniorInquiry: {
        ...user.seniorInquiry,
        tyPulseCalibrationName: JSON.stringify(params)
        // }
      })
    }
    setIsOpen(false)
  }

  function onOpenFullScreen(){
    setIsFullScreenReport(true);
  }

  const actionRef = useRef(null)



  const tyPulseCalibrationName = user?.seniorInquiry?.tyPulseCalibrationName && JSON.parse(user?.seniorInquiry?.tyPulseCalibrationName)
  console.log('tyPulseCalibrationName =======__:>> ', tyPulseCalibrationName);

  return (
    <div>
      <iframe
        id='mainFrame'
        name='mainFrame'
        src={data[0] && data[0]?.pulseFile}
        frameborder="0"
        allowfullscreen="true"
        width="100%"
        style={{
          height: 400,
          overflow: 'auto'
        }}
      />

      <Space direction="vertical" size={12}>
        <Space>
          <Button onClick={onOpenhandle}>
            左手:
            <b>
              {
                Array.isArray(tyPulseCalibrationName?.left) && tyPulseCalibrationName?.left?.length > 0 ?
                  `${tyPulseCalibrationName?.left}` : '常规脉'
              }
            </b>
          </Button>
          <Button onClick={onOpenhandle}>
            右手:
            <b>
              {
                Array.isArray(tyPulseCalibrationName?.right) && tyPulseCalibrationName?.right?.length > 0 ?
                  `${tyPulseCalibrationName?.right}` : '常规脉'
              }
            </b>
          </Button>
          <Button onClick={onOpenFullScreen}>
            全屏显示报告
          </Button>
        </Space>
        {/* <Space>
        {
          user?.illnessNameHistory && user?.illnessNameHistory?.split(',').map((item: any, index: number) => {
            return <div key={index}>{item}</div>
          })
        }

      </Space> */}

        <Divider />
        <div>
          <div>诊脉列表</div>
          {
            data?.map((item: any, index: number) => {
              let pulseDataJson = {};
              try {
                pulseDataJson = item?.tyPulseCalibrationName ? JSON.parse(item?.tyPulseCalibrationName) : {};
              } catch (error) {
                pulseDataJson = {}
              }

              // JSON.parse("{\"stabilityIndex\": \"100%\",\"measureTime\": \"2023-12-18 17:53:41\",\"heartRate\": \"57次/分钟\",\"handPulse\": [{\"name\": \"左手脉象\",\"value\": \"迟\"},{\"name\": \"右手脉象\",\"value\": \"迟\"},{\"name\": \"左右手脉象\",\"value\": \"迟\"}],\"branchPulse\": {\"name\": \"分部脉象\",\"value\": [{\"name\": \"寸部\",\"value\": \"沉、滑\"},{\"name\": \"关部\",\"value\": \"平\"},{\"name\": \"尺部\",\"value\": \"细\"}]}}")
              // console.log('pulseDataJson :>> ', pulseDataJson);
              return (
                <a key={index} target='_blank' href={item?.pulseFile} style={{ paddingTop: 10, display: 'block' }}>
                  <Space>
                    <div>{item?.gmtCreate}</div>
                    <Space>
                      {
                        Array.isArray(pulseDataJson?.left) && pulseDataJson?.left?.length > 0 ?
                          `${pulseDataJson?.left}` : '常规脉'
                      }
                      {
                        Array.isArray(pulseDataJson?.right) && pulseDataJson?.right?.length > 0 ?
                          `${pulseDataJson?.right}` : '常规脉'
                      }
                    </Space>
                  </Space>
                </a>
              )
            })
          }
        </div>

        <EditModal
          row={user}
          isOpen={isOpen}
          handleModal={onClose}
          actionRef={actionRef}
        />
      </Space>
      {
      isFullScreenReport?
      <Drawer title="脉象" placement="right" width={"100%"} height={"100%"} onClose={()=>setIsFullScreenReport(false)} open={isFullScreenReport}>
          <div>
          <iframe
            id='mainFrameFull'
            name='mainFrameFull'
            src={data[0] && data[0]?.pulseFile}
            frameborder="0"
            allowfullscreen="true"
            width="100%"
            height="100%"
            style={{
              height: "700px",
              overflow: 'auto'
            }}
          />
          </div>
        </Drawer>:null
      }
    </div>

  )
}

export default PulseInfo;